<template>
	<view class="main">
		<header-vue :back="true" title="确认下单"></header-vue>
		<view class="flex font28 tab">
			<view class="flex column" :class="{active: !tabIndex}" @click="tabIndex = 0">
				<view>上门配送</view>
				<i class="iconfont icon-tab-circle"></i>
			</view>
			<view class="flex column" :class="{active: tabIndex}" @click="tabIndex = 1">
				<view>线下自提</view>
				<i class="iconfont icon-tab-circle"></i>
			</view>
		</view>
		<view class="list">
			<view v-if="tabIndex" class="yushou-progress">
				<view class="font40 fontbold-500">待付尾款</view>
				<view class="flex start font24" style="margin-top: 12rpx;">
					<i class="iconfont icon-clock"></i>
					请于2025-09-12 00:00 前付清尾款
				</view>
				<view class="flex center font24 progress-line">
					<view class="flex column center">
						<view>定金￥50</view>
						<view class="flex center dot">
							<view></view>
						</view>
					</view>
					<view class="line"></view>
					<view class="flex column center">
						<view>尾款￥250</view>
						<view class="flex center dot">
							<view></view>
						</view>
					</view>
				</view>
			</view>
			<view v-if="tabIndex" class="white-box" style="padding-top: 0;margin-top: -120rpx;">
				<view class="flex between form-item font28 phone" style="border: 0;">
					<view>联系人</view>
					<input placeholder="请输入联系人姓名" />
				</view>
				<view class="flex between form-item font28 phone" style="padding-bottom: 12rpx !important;">
					<view>联系电话</view>
					<input placeholder="请输入联系电话" />
				</view>
			</view>
			<view class="white-box">
				<view class="flex start store-title font24 fontbold-500">
					<i class="iconfont icon-store font24" style="height: 24rpx;"></i>
					<view>新宜家高桥店</view>
				</view>
				<view class="flex item">
					<image :src="IMAGE_URL + '/static/login/bg.png'"></image>
					<view class="flex column between start store-info">
						<view>
							<view class="flex start">
								<view class="tag font20">自营</view>
								<view class="font28 fontbold-500">巴旦木去核奶枣零食夹心</view>
							</view>
							<view class="sale-num font24">已售36</view>
						</view>
						<view v-if="tabIndex" class="flex between font20 num">
							<view class="flex price">
								<text class="font28">￥</text>
								<text class="font36">63</text>
								<text class="font28">.10</text>
							</view>
							<view class="font24">X1</view>
						</view>
						<view v-else class="flex between font20 num">
							<view class="flex price color-gold">
								<text class="font24">定金￥</text>
								<text class="font32">50</text>
							</view>
							<numBoxVue></numBoxVue>
						</view>
					</view>
				</view>
				<template v-if="!tabIndex">
					<view class="flex between form-item font28" style="padding-top: 0;">
						<view>单件预售价</view>
						<view class="color-gold">￥1680</view>
					</view>
					<view class="flex between form-item font28">
						<view>虚拟资产</view>
						<i class="iconfont icon-jiantou"></i>
					</view>
				</template>
			</view>
			<view v-if="!tabIndex" class="white-box" style="padding-bottom: 28rpx;">
				<view class="font28">备注</view>
				<view class="modal-content" style="padding: 0;margin-top: 20rpx;">
					<textarea placeholder="请输入~" v-model="value" class="font24"></textarea>
					<view class="font24 txt-len">{{value.length}}/100</view>
				</view>
			</view>
			<view v-if="tabIndex" class="white-box" style="padding-top: 0;">
				<view class="flex between form-item font28">
					<view class="color-666">商品总价</view>
					<view>180.00</view>
				</view>
				<view class="flex between form-item font28">
					<view class="color-666">定金（已支付）</view>
					<view>20.00</view>
				</view>
				<view class="flex between form-item font28" style="border: 0;">
					<view>优惠券</view>
					<i class="iconfont icon-jiantou font28"></i>
				</view>
				<view class="flex between form-item font28">
					<view>虚拟资产</view>
					<i class="iconfont icon-jiantou"></i>
				</view>
				<view class="flex between form-item font28">
					<view>尾款</view>
					<view class="price fontbold-500">80.00</view>
				</view>
			</view>
			<view v-if="tabIndex" class="white-box" style="padding-top: 0;">
				<view class="flex between form-item font28">
					<view class="color-666">订单编号</view>
					<view>DD70058687923622</view>
				</view>
				<view class="flex between form-item font28">
					<view class="color-666">订单备注</view>
					<view>内容内容内容</view>
				</view>
				<view class="flex between form-item font28" style="border: 0;">
					<view>下单时间</view>
					<view>2025-06-01 12:23:21</view>
				</view>
			</view>
		</view>
		<view v-if="tabIndex" class="flex between fixed">
			<view class="flex start">
				<view class="item font20">
					<i class="iconfont icon-kefu font40"></i>
					<view>客服</view>
				</view>
			</view>
			<view class="flex font36 fontbold-500">
				<view class="flex btn-buy" @click="addGoods('buy')">支付尾款￥80</view>
			</view>
		</view>
		<view v-else class="fixed">
			<view class="flex start font28" style="margin: 20rpx 0;" :class="{active: radioAll}" @click="radioAll = !radioAll">
				<view class="flex radio">
					<i class="iconfont icon-duihao" v-if="radioAll"></i>
				</view>
				<view class="font24">同意<text style="color: rgba(7, 133, 207, 1);">《预售协议》</text>，描述说明</view>
			</view>
			<view class="flex btn-buy font36 fontbold-500" style="margin-bottom: 10rpx;" @click="addGoods('buy')">支付定金 41.00</view>
		</view>
		<u-popup :show="showModal" round="28rpx" mode="center" @close="showModal = false">
			<view class="flex modal-title">
				<view class="flex font28 fontbold-500">备注</view>
				<i class="iconfont icon-close font32" @click="showModal = false"></i>
			</view>
			<view class="modal-content">
				<textarea placeholder="请输入~" v-model="value" class="font24"></textarea>
				<view class="font24 txt-len">{{value.length}}/100</view>
			</view>
			<view class="modal-footer" style="padding: 40rpx 64rpx 28rpx 64rpx">
				<view class="flex submit-btn font32 fontbold-500" @click="showModal = false">确认</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import headerVue from '@/components/header.vue'
	import numBoxVue from './components/numBox.vue'
	import {
		searchApi
	} from '../../api/modules/shop'
	import appConfig from '@/config/app.js'

	export default {
		data() {
			return {
				IMAGE_URL: appConfig.IMAGE_URL,
				params: {
					keyword: ''
				},
				tabIndex: 0,
				value: '',
				showModal: false
			}
		},
		components: {
			headerVue,
			numBoxVue,
		},
		mounted() {},
		methods: {
			goPage(url) {
				uni.navigateTo({
					url
				});
			},
		}
	}
</script>
<style lang="scss" scoped>
	.main {
		background: #F6F6F6;
	}

	.tab {
		color: $uni-text-color-grey1;
		margin-bottom: 30rpx;
		margin: 28rpx 0;

		.column {
			margin-right: 60rpx;
		}

		.icon-tab-circle {
			width: 26rpx;
			height: 12rpx;
			margin-top: 6rpx;
			font-size: 12rpx;
			color: $uni-text-color-inverse;
		}

		.active {
			color: $uni-text-color;
			font-size: 30rpx;
			font-weight: 500;

			.icon-tab-circle {
				color: $uni-color-primary;
			}
		}
	}

	.list {
		padding: 0 32rpx 100rpx;
		box-sizing: border-box;
	}
	
	.color-gold {
		color: #DF9824 !important;
	}

	.yushou-progress {
		height: 400rpx;
		background: linear-gradient(to bottom, #F3FAFF 0%, rgba(243, 250, 255, 0) 100%) !important;
		position: relative;
		width: 100vw;
		margin-left: -32rpx;
		padding: 28rpx 32rpx;
		box-sizing: border-box;

		.icon-clock {
			font-size: 24rpx;
			color: #DF9824;
			margin-right: 4rpx;
		}

		.progress-line {
			color: #DF9824;
			margin-top: 40rpx;
			align-items: flex-end;
		}

		.line {
			width: 108rpx;
			height: 1rpx;
			background: #DDDDDD;
			position: relative;
			top: -12rpx;
		}

		.dot {
			width: 28rpx;
			height: 28rpx;
			background: #FFF2DB;
			border-radius: 50%;
			margin-top: 10rpx;

			view {
				width: 16rpx;
				height: 16rpx;
				background: #DF9824;
				border-radius: 50%;
			}
		}
	}

	.white-box {
		background: $uni-bg-color;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.08);
		border-radius: 20rpx;
		padding: 28rpx 28rpx 16rpx 28rpx;
		box-sizing: border-box;
		margin-bottom: 28rpx;

		.store-title {
			padding-bottom: 28rpx;
		}

		.iconfont {
			margin-right: 4rpx;
		}

		image {
			width: 200rpx;
			height: 200rpx;
			border-radius: 16rpx;
			margin-right: 20rpx;
			flex-shrink: 0;
		}

		.price {
			color: $uni-text-color-red;
			align-items: baseline;
		}

		.item {
			padding-bottom: 28rpx;
		}

		.store-info {
			width: 100%;
			height: 200rpx;
			align-items: flex-start;

			.tag {
				padding: 0 8rpx;
				height: 28rpx;
				box-sizing: border-box;
				background: #DF9824;
				border-radius: 4rpx;
				margin-right: 8rpx;
				color: $uni-text-color-inverse;
			}

			.sale-num {
				color: $uni-text-color-grey;
				margin-top: 20rpx;
			}

			.num {
				color: $uni-text-color-grey1;
				width: 100%;
			}

			.icon-comment {
				margin-left: 26rpx;
			}
		}
		
		.phone {
			border-top: 1rpx solid #DDDDDD;
			padding: 28rpx 0 !important;
		}
		
		.color-666 {
			color: $uni-text-color-grey1;
		}

		.form-item {
			padding: 28rpx 0 12rpx 0;
			box-sizing: border-box;
			
			.icon-jiantou {
				margin-left: 8rpx;
				margin-right: 0;
			}

			.flex {
				width: 400rpx;
			}

			input {
				text-align: right;

				::v-deep .input-placeholder {
					color: #AAAAAA;
				}
			}
		}
	}

	.fixed {
		position: fixed;
		width: 100%;
		min-height: 88rpx;
		background: $uni-bg-color;
		padding: 0 32rpx;
		box-sizing: border-box;
		bottom: env(safe-area-inset-bottom);
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);

		.btn-buy {
			padding: 0 26rpx;
			height: 76rpx;
			border-radius: 60rpx;
			color: $uni-text-color-inverse;
			background: linear-gradient(90deg, #0785CF 0%, #25A4EF 100%);
			box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(7, 133, 207, 0.1);
		}
		
		.radio {
			width: 22rpx;
			height: 22rpx;
			border-radius: 50%;
			border: 1rpx solid $uni-color-primary;
			margin-right: 8rpx;
		}
		
		.active {
			color: $uni-text-color;
		
			.radio {
				background: $uni-color-primary;
				color: $uni-text-color-inverse;
			}
		}
	}

	.modal-box {
		padding: 0 32rpx 60rpx;
		box-sizing: border-box;

		.list-box {
			background: #F6F6F6;
			border-radius: 16rpx;
			padding: 20rpx;
			box-sizing: border-box;

			.title {
				color: $uni-text-color-grey1;
			}
		}
	}

	.modal-content {
		padding: 0 28rpx;
		box-sizing: border-box;
		position: relative;
		color: $uni-text-color-grey;

		textarea {
			width: calc(100vw - 140rpx);
			height: 220rpx;
			background: #FAFAFA;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			padding: 20rpx;
			box-sizing: border-box;
			width: 100%;
		}

		.txt-len {
			position: absolute;
			bottom: 32rpx;
			right: 40rpx;
		}
	}

	.modal-footer {
		padding: 20rpx 64rpx 40rpx 64rpx;
		box-sizing: border-box;

		.submit-btn {
			width: 100%;
			height: 84rpx;
			background: $uni-color-primary;
			box-shadow: 0rpx 6rpx 12rpx 0rpx rgba(7, 133, 207, 0.16);
			border-radius: 100rpx;
			color: $uni-text-color-inverse;
		}
	}
</style>